<template>
	<view>
		<view class="goods">
			<view class="title">购买商品</view>
			<view class="list flex-between" v-for="(item,index) in 2" :key="'a1'+index">
				<image src="/static/imgs/menus1.jpg"></image>
				<view class="right flex-between">
					<view class="name">商品名称商品名称商品名称商品名称商品名称</view>
					<view class="price-num flex-between">
						<view class="price">￥12.00</view>
						<view class="num">共1件</view>
					</view>
				</view>
			</view>
			<view class="bottom flex-between">
				<view>商品总价:</view>
				<view class="right">￥200.00</view>
			</view>
		</view>
		<view class="peisong">
			<view class="title flex">
				配送信息
			</view>
			<view class="list-box">
				<view class="list flex-between">
					<view class="left">收货人</view>
					<view class="right">张三</view>
				</view>
				
				<view class="list flex-between">
					<view class="left">收货地址</view>
					<view class="right">大学科技园大学科技园大学科技园大学科技园大学科技园</view>
				</view>
			</view>
		</view>
		<view class="pay-type" v-if="status == 1">
			<view class="title">支付方式</view>
			<view class="list flex-between" @click="payType = 1">
				<view class="left flex">
					<view class="iconfont iconweixin"></view>
					<text>微信支付</text>
					
				</view>
				<view class="iconfont right flex-center" :class="{iconduihao2:payType == 1}"></view>
			</view>
			<view class="list flex-between" @click="payType = 2">
				<view class="left flex">
					<view class="iconfont iconzhifubao"></view>
					<text>支付宝支付</text>
				</view>
				<view class="right iconfont flex-center" :class="{iconduihao2:payType == 2}"></view>
			</view>
		</view>
		<view class="order-msg">
			<view class="title flex">订单信息</view>
			<view class="list-box">
				<view class="list flex-between">
					<view class="left">订单号码</view>
					<view class="right">123465</view>
				</view>
				<view class="list flex-between">
					<view class="left">下单门店</view>
					<view class="right">黑网客</view>
				</view>
				<view class="list flex-between">
					<view class="left">下单账号</view>
					<view class="right">123465</view>
				</view>
				<view class="list flex-between">
					<view class="left">下单方式</view>
					<view class="right">在线下单</view>
				</view>
				<view class="list flex-between">
					<view class="left">下单时间</view>
					<view class="right">2020-08-05 15：22：22</view>
				</view>
				<view class="list flex-between">
					<view class="left">预计送达</view>
					<view class="right">2020-08-05 15：22：22</view>
				</view>
				<view class="list flex-between">
					<view class="left">支付方式</view>
					<view class="right">在线支付</view>
				</view>
				<view class="list flex-between">
					<view class="left">备注信息</view>
					<view class="right">事件的看法精神科大夫精神科大夫加快速度就是看到房价肯定附近</view>
				</view>
			</view>
		</view>
		
		
		<view class="footer flex">
			<view class="flex-center">取消订单</view>
			<view class="green flex-center">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 1,
				payType:1
			};
		},
		onLoad(options) {
			this.status = options.status;
			let title;
			if (this.status == 1) title = "待付款"
			if (this.status == 2) title = "待发货"
			if (this.status == 3) title = "待收货"
			if (this.status == 4) title = "待评价"
			if (this.status == 5) title = "待确认"
			uni.setNavigationBarTitle({
				title: title
			})
		}
	}
</script>

<style lang="less">
	@main-color:#039702;
	@main-color:#039702;
	.addr-box{
		background: #fff;
		padding: 20rpx 30rpx;
		.top{
			view{
				font-size: 32rpx;
				margin-right: 20rpx;
				font-weight: bold;
				&.default{
					font-size: 22rpx;
					padding: 0 20rpx;
					border:2rpx solid @main-color;
					font-weight: normal;
					color:@main-color;
					transform: scale(.8);
				}
			}
			
		}
		.bottom{
			font-size: 30rpx;
			margin-top: 10rpx;
		}
	}
	
	.goods {
		margin: 30rpx 0;
		background: white;
		padding: 20rpx 30rpx 0;

		.title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.list {
			margin-top: 30rpx;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
			}

			.right {
				flex-direction: column;
				align-items: flex-start;
				width: 470rpx;
				height: 200rpx;

				.name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.price-num {
					width: 100%;
				}

				.price {
					font-size: 32rpx;
					color: red;
					font-weight: bold;
				}

				.num {
					font-size: 30rpx;
					color: #999;
				}
			}
		}

		.bottom {
			height: 80rpx;
			font-size: 32rpx;
			justify-content: flex-end;

			.right {
				color: red;
				font-weight: bold;
			}
		}
	}
	.peisong{
		margin: 30rpx 0;
		background: white;
		padding: 0 30rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			height:80rpx ;
			border-bottom: 2px solid #eee;
		}
		.list-box{
			padding: 20rpx 0;
		}
		.list{
			padding: 15rpx 0;
			font-size: 30rpx;
			align-items: flex-start;
			.left{
				color:#666;
			}
			.right{
				max-width: 550rpx;
				line-height: 1.5;
			}
		}
	}
	.order-msg{
		margin: 30rpx 0 130rpx;
		background: white;
		padding: 0 30rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			height:80rpx ;
			border-bottom: 2px solid #eee;
		}
		.list-box{
			padding: 20rpx 0;
		}
		.list{
			padding: 15rpx 0;
			font-size: 30rpx;
			align-items: flex-start;
			.left{
				color:#666;
			}
			.right{
				max-width: 550rpx;
			}
		}
	}
	.pay-type{
		background: white;
		padding: 20rpx 30rpx 0;
		.title{
			font-size: 36rpx;
			font-weight: bold;
		}
		.list{
			height: 100rpx;
			border-bottom: 2px solid #eee;
			font-size: 32rpx;
			.iconweixin{
				font-size: 50rpx;
				margin-right: 20rpx;
				color:#07C160;
			}
			.iconzhifubao{
				font-size: 50rpx;
				margin-right: 20rpx;
				color:#007AFF;
			}
			.right{
				width: 30rpx;
				height:30rpx;
				border:2rpx solid #999;
				border-radius: 50%;
			}
			.iconduihao2{
				color:@main-color
			}
		}
	}
	
	.footer{
		position: fixed;
		bottom:0;
		width: 100vw;
		height: 100rpx;
		background: white;
		box-shadow: 0 5rpx 15rpx 15rpx #eee;
		padding: 0 30rpx;
		box-sizing: border-box;
		justify-content: flex-end;
		view{
			width: 180rpx;
			height: 60rpx;
			font-size: 32rpx;
			border-radius: 30rpx;
			border:2rpx solid #eee;
			margin-left: 30rpx;
			&.green{
				background: @main-color;
				color:#fff;
			}
		}
	}
</style>
